<!DOCTYPE html>
<html lang="zh-CN">

<head>
    {% load static %}
    <meta charset="utf-8">
    <title>新疆地区水稻产量影响因素可视化分析系统登录注册页</title>
    <link rel="stylesheet" href="{% static 'web/login_register/style.css' %}">
</head>

<body>
<div class="dowebok">
    <div class="form sign-in">
        <h2>欢迎回来</h2>
        <form id="login-form">
            <label>
                <span>用户名</span>
                <input type="text" name="username"/>
            </label>
            <label>
                <span>密码</span>
                <input type="password" name="password"/>
            </label>
        </form>
        <button type="button" class="submit" onclick="login()">登 录</button>
    </div>
    <div class="sub-cont">
        <div class="img">
            <div class="img__text m--up">
                <h2>还未注册？</h2>
                <p>立即注册</p>
            </div>
            <div class="img__text m--in">
                <h2>已有帐号？</h2>
                <p>有帐号就登录吧，好久不见了！</p>
            </div>
            <div class="img__btn">
                <span class="m--up">注 册</span>
                <span class="m--in">登 录</span>
            </div>
        </div>
        <div class="form sign-up">
            <h2>立即注册</h2>
            <form id="register-form">
                <label>
                    <span>用户名</span>
                    <input type="text" name="username"/>
                </label>
                <label>
                    <span>密码</span>
                    <input type="password" name="password"/>
                </label>
            </form>
            <button type="button" class="submit" onclick="register()">注 册</button>
        </div>
    </div>
</div>

<script src="{% static 'web/login_register/script.js' %}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

{#登录注册按钮对应逻辑#}
<script>
    function login() {
        var login_data = new FormData(document.getElementById("login-form"))
        axios.post("{% url 'login' %}", login_data)
            .then(function (response) {
                // 处理后台返回的响应
                alert(response.data.message);
                if (response.data.code === 1) {
                    // 登陆成功则重定向到可视化界面
                    window.location.href = `{% url 'visualize' %}?status=${response.data.data}`;

                }

            })
            .catch(function (error) {
                // 处理请求错误
                console.log(error);
            });
    }

    function register() {
        var register_form = new FormData(document.getElementById("register-form"))
        axios.post("{% url 'register' %}", register_form)
            .then(function (response) {
                // 处理后台返回的响应
                alert(response.data.message);

            })
            .catch(function (error) {
                // 处理请求错误
                console.log(error);
            });
    }
</script>
</body>

</html>